<template>
  <div>
    <div class="search">
        <div class="header-left" @click="back">
          <div class="iconfont backicon">&#xe648;</div>
        </div>
      <span class="iconfont" style="margin-left: 19px;margin-top: -2px;">&#xe60e;</span>
      <input class="search-input" v-model="keyword" type="text" placeholder="输入美食/景点/穿搭/的主题">
      <button @click="search">搜索</button>
    </div>
    <div
      class="search-content"
      ref="search"
      v-show="searched"
    >
      <search-foods
        :food="food"
        v-show="!hasNoData"
      ></search-foods>
      <ul v-show="hasNoData">
        <li class="search-item border-bottom">没有找到匹配数据
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
    import axios from 'axios'
    import SearchFoods from "./component/SearchFoods";

    export default {
        name: "search",
        components: {
            SearchFoods
        },
        data() {
            return {
                'keyword': '',
                'food': [],
                'searched': false
            }
        },
        computed: {
            hasNoData() {
                return !this.food.length
            }
        },
        methods: {
            back () {
              this.$router.push('/home')
             this.$store.state.search=true
            },
            search() {
                axios.get('/api/food/index/search/'+this.keyword)
                    .then((res) => {
                        this.food = res.data.data.data;
                        this.searched = true
                        this.$store.state.search=false
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        }
    }
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .search
    padding: 0 0.1rem;
    line-height: 40px;
    background $bgColor
    .header-left
      width 10px
      float left
      .backicon
        position relative
        left 0px
        padding-top 0px
        text-align center
        font-size 18px
        color #fff
        margin-left 3px
    .search-input
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      width: 230px;
      height: 30px;
      padding-left: 40px;
      margin-left: 27px;
      background: #fff;
      border-radius: 10px;
      margin-bottom: 2px;
      color: #ccc;
      line-height: 25px;
      font-size: 15px;
    button
      background: #00bcd4;
      color: #fff;
      padding: 0.1rem;
      margin-left: 7px;
      font-size: 16px;
      margin-bottom: 5px;

  .search-content
    position: absolute
    top: 42px
    left: 0
    right: 0
    z-index 1
    overflow hidden
    background: white;
    .search-item
      line-height: .62rem
      padding-left .2rem
      background #ffffff
      text-align center
      color #666

</style>
